import { useState } from "react";
import { Button, Input, Radio, message } from "antd";

import { setRole } from "@/api/user";
import "./style/index.scss";

const AccessControl = () => {
  const [username, setUsername] = useState("");
  const [value, setValue] = useState("admin");
  const [messageApi, msgs] = message.useMessage();
  const goUpdateRole = () => {
    setRole({
      userName: username,
      userRole: value,
    }).then((res) => {
      if (res.code === 200) {
        messageApi.success(res.message);
      } else {
        messageApi.error(res.message);
      }
    });
  };
  const onChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <>
    {msgs}
    <div className="card">
      <div>
        Username:
        <Input
          placeholder="请输入用户名"
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <Radio.Group onChange={onChange} value={value}>
          <Radio value="admin">admin</Radio>
          <Radio value="normal">normal</Radio>
        </Radio.Group>
      </div>
      <Button type="primary" onClick={() => goUpdateRole()}>
        修改权限
      </Button>
    </div>
    </>
  );
};

export default AccessControl;
